<template>
	<view>
		<view :class="['copuon-item',item.counponStatus == 2 || item.counponStatus == 3?'use':'']">
			<view :class="['coupon', showInfo?'showInfo':'']">
				<view class="coupon-content">
					<view class="coupon-name"><text
							class="tag" v-if="false">{{ getUserArea(item.useArea?item.useArea:item.couponDVOList.useArea) }}</text>{{ item.couponName?item.couponName:item.couponDVOList.couponName }}
					</view>
					<view class="coupon-time" v-if="item.useType == 1">领取后{{ item.couponTime }}天有效</view>
					<view class="coupon-time" v-if="item.useType == 2">{{ getTimeFrom(item.startUseTime,'yyyy.mm.dd') }}
						-
						{{ getTimeFrom(item.endUseTime,'yyyy.mm.dd') }}
					</view>
					<view class="coupon-time" v-if="item.counponExpiration">有效期：{{ item.counponExpiration }}</view>
					<view class="coupon-btnInfo" @click="showInfo = !showInfo" v-if="item.useArea !== 1&&false">
						<view class="text">详细信息</view>
						<view class="icon">
							<u-icon :name="showInfo?'arrow-up':'arrow-down'" size="12" color="#999999"></u-icon>
						</view>
					</view>
					<view class="coupon-icon" v-if="item.counponStatus && item.counponStatus !== 1">
						<u--image :src="item.counponStatus == 2 ? useIMG : passIMG " :showLoading="false"
							:showError="false" :fade="false" :showMenuByLongpress="false" width="100rpx"
							height="100rpx"></u--image>
					</view>
				</view>
				<view class="coupon-right">
					<view>
						<view class="price"><text
								class="showPrice">返利{{ (item.price?item.price:item.couponDVOList.price)*100 }}%</text>
						</view>
						<view class="cond" v-if="item.orderAmount > 0">满{{ parseFloat(item.orderAmount) }}元可用</view>
						<view class="cond" v-if="item.couponDVOList && item.couponDVOList.orderAmount > 0">
							满{{ parseFloat(item.couponDVOList.orderAmount) }}元可用</view>
						<view class="btn get" v-if="(listType == 0 || listType == 3) && !item.isReceive" @click="handlerGetCoupon(item.id)">
							立即领取
						</view>
						<view class="btn us" v-if="(listType == 0 && item.isReceive) || listType == 1" @click="handlerUseCoupon(item)">
							立即使用
						</view>
						<view class="btn no" v-if="listType == 3 && item.isReceive">
							已领取
						</view>
					</view>
				</view>
			</view>
			<view class="info" v-if="showInfo" @click="showInfo = false">
				<view class="info-item">使用说明：{{ getLimitContent(item.useArea?item.useArea:item.couponDVOList.useArea) }}
				</view>
				<view class="info-item" v-if="item.getType == 2">领取时间：{{ getTimeFrom(item.startTime,'yyyy.mm.dd') }} -
					{{ getTimeFrom(item.endTime,'yyyy.mm.dd') }}
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		copuonUseAreaData
	} from "@/config/dataSource";
	import {
		receiveCoupon
	} from "@/config/api";
	export default {
		name: 'copuon-item',
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			listType: {
				type: String,
				default: "0"
			},
			customStyles: {
				type: Object,
				default () {
					return {}
				}
			},
			url: {
				type: String
			}
		},
		data() {
			return {
				showInfo: false,
				passIMG: this.$base.ossUrl + "icon_copuon_pass.png",
				useIMG: this.$base.ossUrl + "icon_copuon_use.png"
			};
		},
		methods: {
			// 获取优惠券类型
			getUserArea(userArea) {
				let str = copuonUseAreaData.find((p) => p.value === userArea);
				if (str) {
					return str.label;
				}
			},
			// 日期时间格式化
			getTimeFrom(time, format) {
				if (time) {
					time = new Date(time.replace("-", "/"));
					time = uni.$u.date(time.getTime(), format);
					return time;
				}
			},
			// 得到具体限制内容
			getLimitContent(userArea) {
				let str = "全场所有商品通用";
				if (userArea == 2) {
					str = "仅可购买部分指定商品";
				}
				if (userArea == 3) {
					str = "仅可购买部分指定品牌商品";
				}
				if (userArea == 4) {
					str = "仅可购买部分指定分类商品";
				}
				return str;
			},
			handlerGetCoupon(id) {
				let httpData = {
					id
				};
				receiveCoupon(httpData).then((res) => {
					uni.$u.toast("领取成功");
					this.$emit("handler");
				});
			},
			handlerUseCoupon(item) {
				console.log("item",item);
				let url = "/pages/goods/list";
				if (item.useArea && item.useArea !== 1) {
					url = "/pages/goods/list?couponId=" + item.id
				}
				if (item.couponDVOList && item.couponDVOList.useArea !== 1) {
					url = "/pages/goods/list?couponId=" + item.couponDVOList.id
				}
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss">
	.copuon-item {

		.coupon {
			background-color: #FFFFFF;
			width: 100%;
			margin-top: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			height: 180rpx;
			display: flex;
			justify-content: space-between;

			&.showInfo {
				border-radius: 10rpx 10rpx 0 0;
			}

			.coupon-content {
				height: 180rpx;
				flex: 1;
				padding: 20rpx;
				position: relative;

				.coupon-name {
					line-height: 35rpx;
					overflow: hidden;
					height: 70rpx;

					.tag {
						background-color: $u-error;
						border-radius: 100px;
						font-size: 20rpx;
						color: #FFFFFF;
						padding: 5rpx 15rpx;
						margin-right: 10rpx;
					}
				}

				.coupon-time {
					font-size: 20rpx;
				}

				.coupon-btnInfo {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;

					.text {
						font-size: 22rpx;
						color: #999999;
					}
				}

				.coupon-icon {
					position: absolute;
					right: -10rpx;
					top: 20rpx;

				}
			}

			.coupon-right {
				height: 180rpx;
				width: 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFE6E6;
				position: relative;

				.price {
					text-align: center;
					color: $u-error;

					.showPrice {
						font-size: 40rpx;
						font-weight: bold;
					}
				}

				.cond {
					text-align: center;
					font-size: 22rpx;
					margin-top: 10rpx;
					color: $u-error;
				}

				.btn {
					text-align: center;
					border-radius: 100px;
					padding: 6rpx 20rpx;
					margin-top: 10rpx;

					&.get {
						background-color: $u-error;
						color: #FFFFFF;
						font-size: 22rpx;
					}

					&.us {
						border: 1rpx solid $u-error;
						color: $u-error;
						font-size: 22rpx;
						background-color: #FFFFFF;
					}

					&.no {
						background-color: #FFFFFF;
						font-size: 22rpx;
						color: #FFB3B3;
					}
				}

				&::after {
					content: "";
					position: absolute;
					left: -10rpx;
					top: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background-color: #F5F5F5;
					border-radius: 100px;
				}

				&::before {
					content: "";
					position: absolute;
					left: -10rpx;
					bottom: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background-color: #F5F5F5;
					border-radius: 100px;
				}
			}
		}

		.info {
			background-color: #F9F9F9;
			padding: 20rpx;
			border-radius: 0 0 10rpx 10rpx;

			.info-item {
				font-size: 20rpx;
			}
		}

		&.use {
			.coupon {
				.coupon-content {

					.coupon-name {

						.tag {
							background-color: #D1D1D1;
						}
					}
				}

				.coupon-right {
					background-color: #D1D1D1;

					.price {
						color: #FFFFFF;
					}

					.cond {
						color: #FFFFFF;
					}

					.btn {

						&.get {
							background-color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
